<template>
  <div class="product">
      <h2>Product组件</h2>
      <p>{{id}}-{{pName}}-{{pPrice}}</p>
      <p>{{queryReturn}}</p>
  </div>
</template>

<script>
    export default {
        name:"Product",
        data(){
            return {
                id:'',
                pName:'',
                pPrice:''
            }
        },
        /* created(){
            let { id,pName,pPrice } = this.$route.query;
            this.id=id;
            this.pName=pName;
            this.pPrice=pPrice;
        } */
        /* 当在一直打开同一个组件时，不存在生命周期函数，不销毁不创建，所以created()函数不合适，
        可以用计算属性或者侦听器监视$route的变化，来执行赋值 */
        computed:{
            queryReturn(){
                let { id,pName,pPrice } = this.$route.query;
                return `${id}-${pName}-${pPrice}`
            }
        },
        watch:{
            $route:{
                handler(){
                    let { id,pName,pPrice } = this.$route.query;
                    this.id=id;
                    this.pName=pName;
                    this.pPrice=pPrice;
                },
                immediate:true
            }
        }
    }
</script>

<style scoped>
    .product{
        width: 100%;
        height: 70%;
        background-color: rgb(213, 205, 255);
    }
</style>